<template>
  <div class="enterprise-persons">
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      @click="onAdd"
    >新增人员</el-button>
    <el-table :data="persons"
              row-key="id"
              border
              height="500"
              style="width: 100%">
      <el-table-column prop="name" label="姓名" width="120">
        <template slot-scope="{row}">
          <el-input v-model="row.name" size="mini" placeholder="请输入" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="idCard" label="居住证号" width="180">
        <template slot-scope="{row}">
          <el-input v-model="row.idCard" size="mini" placeholder="请输入" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="nationId" label="民族" width="140">
        <template slot-scope="{row}">
          <el-select v-model="row.nationId" size="mini" placeholder="请选择" style="width: 100%;" clearable>
            <el-option v-for="(item, index) in nationList"
                       :key="index"
                       :label="item.value"
                       :value="item.code"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="linkPhone" label="个人联系电话" width="140">
        <template slot-scope="{row}">
          <el-input v-model="row.linkPhone" size="mini" placeholder="请输入" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="censusRegisterAddress" label="暂住地址">
        <template slot-scope="{row}">
          <el-input v-model="row.censusRegisterAddress" size="mini" placeholder="请输入" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="residenceAddress" label="户籍地址">
        <template slot-scope="{row}">
          <el-input v-model="row.residenceAddress" size="mini" placeholder="请输入" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="masterName" label="户主姓名" width="120">
        <template slot-scope="{row}">
          <el-input v-model="row.masterName" size="mini" placeholder="请输入" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="masterLinkPhone" label="户主联系电话" width="140">
        <template slot-scope="{row}">
          <el-input v-model="row.masterLinkPhone" size="mini" placeholder="请输入" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="personTypeId" label="人员类型（非必填）" width="150">
        <template slot-scope="{row}">
          <el-select v-model="row.personTypeId" size="mini" placeholder="请选择" style="width: 100%;" clearable>
            <el-option v-for="(item, index) in personTypeList"
                       :key="index"
                       :label="item.value"
                       :value="item.code"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{row}">
          <el-popconfirm title="您确定清空吗？" @onConfirm="onConfirm('reset', row)">
            <el-button slot="reference" size="mini" type="warning" style="margin-right: 10px">清空</el-button>
          </el-popconfirm>
          <el-popconfirm title="您确定删除吗？" @onConfirm="onConfirm('delete', row)">
            <el-button slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from "@/api";

export default {
  name: "index",
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    nationList: {
      type: Array,
      default: () => []
    },
    personTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      persons: []
    }
  },
  created() {
    this.queryInfo()
  },
  methods: {
    async queryInfo() {
      let {code, enterprise: data} = await api.PM_ENTERPRISE_INFO({
        id: this.id
      })
      if (code === 0) {
        this.persons = data.persons.map((e, index) => {
          return {
            ...e,
            index
          }
        })
      }
    },
    onAdd() {
      let obj = {
        index: new Date().getTime(),
        name: '',
        idCard: '',
        nationId: '',
        linkPhone: '',
        censusRegisterAddress: '',
        residenceAddress: '',
        masterName: '',
        masterLinkPhone: '',
        personTypeId: '',
        enterpriseId: this.id
      }
      this.persons.unshift(obj)
    },
    onConfirm(type, row) {
      if (type === 'reset') {
        this.persons.forEach(e => {
          if (e.index === row.index) {
            e.name = ''
            e.idCard = ''
            e.nationId = ''
            e.linkPhone = ''
            e.censusRegisterAddress = ''
            e.residenceAddress = ''
            e.masterName = ''
            e.masterLinkPhone = ''
            e.personTypeId = ''
          }
        })
      }
      if (type === 'delete') {
        let index = this.persons.findIndex(e => e.index === row.index)
        this.persons.splice(index, 1)
      }
    },
    async submit(callback) {
      let index = this.persons.findIndex(({
        name,
        idCard,
        nationId,
        linkPhone,
        censusRegisterAddress,
        residenceAddress,
        masterName,
        masterLinkPhone
      }) => {
        return (
          name === '' ||
          idCard === '' ||
          nationId === '' ||
          linkPhone === '' ||
          censusRegisterAddress === '' ||
          residenceAddress === '' ||
          masterName === '' ||
          masterLinkPhone === ''
        )
      })
      if (index !== -1) {
        this.$message.warning(`请检查第 ${index + 1} 行数据是否填写完整`)
        return false
      }
      let { code } = await api.PM_ENTERPRISE_PERSON(this.persons)
      callback(code)
    }
  }
}
</script>

<style lang="scss" scoped>
  .enterprise-persons {
    ::v-deep .el-input {
      .el-input__inner {
        padding: 0 20px 0 5px;
      }
      .el-input__suffix {
        right: -2px;
      }
    }
  }
</style>
